<script setup>
import { User, Avatar, Files } from '@element-plus/icons-vue'
import { ref,onMounted } from 'vue'
import { getAllStudentsAPI,getAllTeachersAPI } from '@/api/admin';
// 模拟静态数据
const totalStudents = ref();
const totalTeachers = ref();
const totalAssignments = 500;
const getAllStudents = async () => {
  try {
    const { data } = await getAllStudentsAPI()
    if (data.code === 200) {
      totalStudents.value = data.data.length
    } else {
      ElMessage.error(data.msg || '获取学生列表失败')
    }
  } catch (error) {
    console.error('获取学生列表失败:', error)
    ElMessage.error('获取学生列表失败')
  }
}
const getAllTeachers = async () => {
  try {
    const { data } = await getAllTeachersAPI()
    if (data.code === 200) {
      totalTeachers.value = data.data.length
    } else {
      ElMessage.error(data.msg || '获取教师列表失败')
    }
  } catch (error) {
    console.error('获取教师列表失败:', error)
    ElMessage.error('获取教师列表失败')
  }
}
onMounted(() => {
  getAllStudents()
  getAllTeachers()
})
</script>

<template>
  <div class="admin-home-container">
    <h1>管理端首页</h1>
    <el-row :gutter="20" class="overview-cards">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="card-content">
            <el-icon class="card-icon"><User /></el-icon>
            <div class="card-text">
              <div class="number">{{ totalStudents }}</div>
              <div class="label">学生总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="card-content">
            <el-icon class="card-icon"><Avatar /></el-icon>
            <div class="card-text">
              <div class="number">{{ totalTeachers }}</div>
              <div class="label">教师总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="card-content">
            <el-icon class="card-icon"><Files /></el-icon>
            <div class="card-text">
              <div class="number">{{ totalAssignments }}</div>
              <div class="label">作业总量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速入口卡片 -->
    <el-card shadow="hover" class="quick-links">
      <template #header>
        <div class="card-header">
          <span>快速入口</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="6">
          <router-link to="/admin/student-management">
            <el-button type="primary" link>学生管理</el-button>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link to="/admin/teacher-management">
            <el-button type="primary" link>教师管理</el-button>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link >
            <el-button type="primary" link>作业管理</el-button>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link>
            <el-button type="primary" link>系统设置</el-button>
          </router-link>
        </el-col>
      </el-row>
    </el-card>

    <!-- 可以添加更多内容，例如最近活动、图表等 -->
  </div>
</template>

<style lang="scss" scoped>
.admin-home-container {
  padding: 20px;

  h1 {
    margin-bottom: 30px;
    font-size: 28px;
    color: #333;
  }

  .overview-cards {
    margin-bottom: 30px;

    .el-card {
      border-radius: 8px;

      .card-content {
        display: flex;
        align-items: center;

        .card-icon {
          font-size: 40px;
          margin-right: 20px;
          color: #409eff;
        }

        .card-text {
          .number {
            font-size: 24px;
            font-weight: bold;
            color: #333;
          }

          .label {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }

  .quick-links .el-card {
    border-radius: 8px;

    .card-header {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .el-button {
        font-size: 16px;
        width: 100%;
    }
  }
}
</style>
